<template>
  <el-dialog
    class="fullscreen-content"
    :show-close="false"
    :visible.sync="dialog.showModal"
    fullscreen
  >
    <div class="com-head">
      <div id="showTime" class="left-date-time">
        2021年01月27日16:00:00
      </div>
      <img class="head-title" src="./images/title-name.png" alt="">
    </div>
    <el-row :gutter="30" style="margin:0;">
      <el-col :span="7">
        <div class="left">
          <div class="left-date-list">
            <div v-for="item in typeList" :key="item.code" :class="{'checked':item.checked}" class="date-item " @click="changeType(item)">{{ item.name }}</div>
          </div>
          <div class="premium-content">
            <div class="title">
              <div class="title-left">保费</div>
              <div class="title-right">
                <div v-for="item in premiumType[typeActive]" :key="item.code" :class="item.code" class="tag-item ">
                  <div class="title-tag" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="total">
              <div class="total-left">{{ areaData.total.areaName }}保费（万元）</div>
              <div class="total-right">{{ areaData.total.totalContractMoney }}</div>
            </div>
            <div
              v-show="areaData.list.length>0"
              id="premium"
              ref="premium"
              v-loading="loadings.histogramLoading"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="premium"
            />
            <div v-if="!areaData.list.length" class="empty">指定区域无相关数据</div>
            <el-button class="ver-arrow-top" icon="el-icon-arrow-up" @click="verArrow(10, 'premium')" />
            <el-button class="ver-arrow-bottom" icon="el-icon-arrow-down" @click="verArrow(-10, 'premium')" />
          </div>
          <div class="premium-content" style="margin-top:0.38rem;">
            <div class="title">
              <div class="title-left">报价单数</div>
              <div class="title-right">
                <div v-for="item in premiumType[typeActive]" :key="item.code" :class="item.code" class="tag-item ">
                  <div class="title-tag" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="total">
              <div class="total-left">{{ areaData.total.areaName }}报价单数（单）</div>
              <div class="total-right">{{ areaData.total.totalQuoteAmount }}</div>
            </div>
            <div
              v-show="areaData.list.length>0"
              id="bill"
              ref="bill"
              v-loading="loadings.histogramLoading"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="premium"
            />
            <div v-if="!areaData.list.length" class="empty">指定区域无相关数据</div>
            <el-button class="ver-arrow-top" icon="el-icon-arrow-up" @click="verArrow(10, 'bill')" />
            <el-button class="ver-arrow-bottom" icon="el-icon-arrow-down" @click="verArrow(-10, 'bill')" />
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="center">
          <div class="header">
            <!-- <div>{{ areaData.total.areaName }}保费总收入</div> -->
            <div>全国保费总收入</div>
            <div>建店数<span>{{ totalMsg.buildShopNum }}</span>家</div>
          </div>
          <div class="price-content">
            <div v-for="(item,index) in 14" :key="index" :class="(index==2||index==6||index==10)?'':'price-item'">
              <span v-if="index==2||index==6||index==10">，</span>
              <span v-else>{{ totalMsg.totalMoney?totalMsg.totalMoney[index]:0 }}</span>
            </div>
          </div>
          <div
            v-loading="loading.mapsLoading"
            class="map-content"
          >
            <div
              id="chinaMap"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="china-map"
            />
            <div v-if="checkProvice" class="back" @click="backChina">返回</div>
            <div class="text">保费（万元）</div>
          </div>
          <div class="trend-content">
            <div class="trand-title" />
            <div
              id="trend"
              ref="trend"
              v-loading="loadings.trandLoading"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="trend"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="right">
          <div class="left-date-time" />
          <div class="premium-content">
            <div class="title">
              <div class="title-left">建店数</div>
              <div class="title-right">
                <div v-for="item in premiumType[typeActive]" :key="item.code" :class="item.code" class="tag-item ">
                  <div class="title-tag" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="total">
              <div class="total-left">{{ areaData.total.areaName }}建店数（家）</div>
              <div class="total-right">{{ areaData.total.totalBuildShopNum }}</div>
            </div>
            <div
              v-show="areaData.list.length>0"
              id="store"
              ref="store"
              v-loading="loadings.histogramLoading"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="premium"
            />
            <div v-if="!areaData.list.length" class="empty">指定区域无相关数据</div>
            <el-button class="her-arrow-left" icon="el-icon-arrow-left" @click="herArrow(-10,'store')" />
            <el-button class="her-arrow-right" icon="el-icon-arrow-right" @click="herArrow(10,'store')" />
          </div>
          <div class="premium-content" style="margin-top:0.38rem;">
            <div class="title">
              <div class="title-left">新增车辆数</div>
              <div class="title-right">
                <div v-for="item in premiumType[typeActive]" :key="item.code" :class="item.code" class="tag-item ">
                  <div class="title-tag" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="total">
              <div class="total-left">{{ areaData.total.areaName }}新增车辆（辆）</div>
              <div class="total-right">{{ areaData.total.totalCarNum }}</div>
            </div>
            <div
              v-show="areaData.list.length>0"
              id="car"
              ref="car"
              v-loading="loadings.histogramLoading"
              element-loading-background="rgba(0, 0, 0, 0.4)"
              class="premium"
            />
            <div v-if="!areaData.list.length" class="empty">指定区域无相关数据</div>
            <el-button class="her-arrow-left" icon="el-icon-arrow-left" @click="herArrow(-10,'car')" />
            <el-button class="her-arrow-right" icon="el-icon-arrow-right" @click="herArrow(10,'car')" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="full-box">
      <span>{{ isFullScreen?'缩小':'全屏' }}</span>
      <el-button class="full-btn" :class="isFullScreen?'exit-full-btn':'full-btn'" @click="fullMap" />
    </div>
    <div class="close-box">
      <span>关闭</span>
      <el-button class="close-btn" @click="closeDialog" />
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';
import { Loading } from 'element-ui';
import { getNowTime, getMonthFilter, sortBy } from '@/utils';
import { getTotalMsgByOrgId, getAreaDataByOrgId, getDateAndAreaMsg, getAreaMsg } from '@/api/mapFull';
import '../../../../../../node_modules/_echarts@4.8.0@echarts/map/js/china';
export default {
  components: {
  },
  data() {
    return {
      isFullScreen: false,
      options: {
        store: {
          start: 0,
          end: 80
        },
        car: {
          start: 0,
          end: 80
        },
        premium: {
          start: 0,
          end: 80
        },
        bill: {
          start: 0,
          end: 80
        }
      },
      checkProvice: '',
      provinceNameMap: {
        '河北': { name: 'hebei', code: '130000' },
        '山西': { name: 'shanxi', code: '140000' },
        '辽宁': { name: 'liaoning', code: '210000' },
        '吉林': { name: 'jilin', code: '220000' },
        '黑龙江': { name: 'heilongjiang', code: '230000' },
        '江苏': { name: 'jiangsu', code: '320000' },
        '浙江': { name: 'zhejiang', code: '330000' },
        '安徽': { name: 'anhui', code: '340000' },
        '福建': { name: 'fujian', code: '350000' },
        '江西': { name: 'jiangxi', code: '360000' },
        '山东': { name: 'shandong', code: '370000' },
        '台湾': { name: 'taiwan', code: '' },
        '河南': { name: 'henan', code: '410000' },
        '湖北': { name: 'hubei', code: '420000' },
        '湖南': { name: 'hunan', code: '430000' },
        '广东': { name: 'guangdong', code: '440000' },
        '海南': { name: 'hainan', code: '460000' },
        '四川': { name: 'sichuan', code: '510000' },
        '贵州': { name: 'guizhou', code: '520000' },
        '云南': { name: 'yunnan', code: '530000' },
        '陕西': { name: 'shanxi1', code: '610000' },
        '甘肃': { name: 'gansu', code: '620000' },
        '青海': { name: 'qinghai', code: '630000' },
        '北京': { name: 'bejing', code: '110000' },
        '西藏': { name: 'xizang', code: '540000' },
        '内蒙古': { name: 'neimenggu', code: '150000' },
        '新疆': { name: 'xinjiang', code: '650000' },
        '广西': { name: 'guangxi', code: '450000' },
        '重庆': { name: 'chongqing', code: '500000' },
        '宁夏': { name: 'ningxia', code: '640000' },
        '天津': { name: 'tianjin', code: '120000' },
        '上海': { name: 'shanghai', code: '310000' }
      },
      isEmpty: {

      },
      loadings: {
        histogramLoading: false, // 柱状图loading
        mapsLoading: false, // 地图部分的loading
        trandLoading: false // 获取保费趋势loading
      },
      loading: false,
      chartGroup: {
        trend: '', // 保费趋势dom
        car: '', // 新增车辆dom
        store: '', // 全国建店dom
        bill: '', // 报价单数dom
        premium: '', // 保费dom
        china: ''// 中间地图dom
      },
      typeActive: 'day',
      typeList: [
        { name: '今日', code: 'day', checked: true },
        { name: '本周', code: 'week', checked: false },
        { name: '本月', code: 'month', checked: false },
        { name: '本年', code: 'year', checked: false }
      ],
      premiumType: {
        day: [{ name: '今日', code: 'blue' }, { name: '昨日', code: 'deep-blue' }, { name: '前日', code: 'green' }],
        week: [{ name: '本周', code: 'blue' }, { name: '上周', code: 'deep-blue' }, { name: '上上周', code: 'green' }],
        month: [{ name: `${getMonthFilter(1)}`, code: 'blue' }, { name: `${getMonthFilter(0)}`, code: 'deep-blue' }, { name: `${getMonthFilter(-1)}`, code: 'green' }],
        year: [{ name: `${new Date().getFullYear()}年`, code: 'blue' }, { name: `${new Date().getFullYear() - 1}年`, code: 'deep-blue' }, { name: `${new Date().getFullYear() - 2}年`, code: 'green' }]
      },
      totalMsg: {
        repairNum: null, //
        totalMoney: null // 全国保费
      },
      areaData: {
        total: {},
        list: [{}]
      },
      totalYear: {},
      dialog: {
        showModal: false
      }
    };
  },
  computed: {
    orgId() {
      return this.$store.state.user.userTree || '1';
    }
  },
  mounted() {
    let premiumDom;
    let billDom;
    let storeDom;
    let carDom;
    let trendDom;
    let chinaMapDom;
    getNowTime();
    this.changeType({ code: 'day' });
    setTimeout(() => {
      premiumDom = document.getElementById('premium');
      billDom = document.getElementById('bill');
      storeDom = document.getElementById('store');
      carDom = document.getElementById('car');
      trendDom = document.getElementById('trend');
      chinaMapDom = document.getElementById('chinaMap');
      this.chartGroup.premium = echarts.init(premiumDom);
      this.chartGroup.bill = echarts.init(billDom);
      this.chartGroup.store = echarts.init(storeDom);
      this.chartGroup.car = echarts.init(carDom);
      this.chartGroup.trend = echarts.init(trendDom);
      this.chartGroup.china = echarts.init(chinaMapDom);

      this.chartGroup.china.on('click', (param) => {
        if (!this.checkProvice) {
            import(`../../../../../../node_modules/_echarts@4.8.0@echarts/map/js/province/${this.provinceNameMap[param.name].name}`).then(res => {
              this.checkProvice = { eName: this.provinceNameMap[param.name].name, cName: param.name, code: this.provinceNameMap[param.name].code };
              // this.getTotalMsg();// 获取顶部数据
              // this.getAreaData();// 获取其他表格数据
              // this.getDateAndArea();// 获取保费趋势
              // this.getAreaMap();// 获取地图数据
            });
        }
      });
    }, 100);

    window.addEventListener('resize', () => {
      setTimeout(() => {
        if (this.chartGroup.trend) {
          this.chartGroup.trend.resize();
        }
        this.chartGroup.car.resize();
        this.chartGroup.store.resize();
        this.chartGroup.bill.resize();
        this.chartGroup.china.resize();
        this.chartGroup.premium.resize();
      }, 200);
    });
  },
  methods: {
    // getSortType(){
    //   if(this.typeActive === 'day'){
    //     return 'now'
    //   }else if(this.typeActive === 'week'){

    //   }else if(this.typeActive === 'month'){

    //   }else{

    //   }
    // },
    // 获取选中日期的toolTips
    getToolTips() {
      const result = [];
      this.premiumType[this.typeActive].forEach(el => {
        result.push(el.name);
      });
      return result;
    },
    // 把获取到的数据转换成地图组件需要的数据
    convertData(data) {
      console.log(data, 'data');
      const largeMoney = String((data.largeMoney / 10000).toFixed(2));
      const totalRepair = data.totalRepairNum;
      data.list.forEach(el => {
        el.value = Number((el.totalContractMoney / 10000).toFixed(2));
        if (this.checkProvice) {
          // 显示单独的省份
          el.name = el.areaName.substring(0, 3);
        } else {
          // 显示全国
          if (el.areaName.includes('黑龙江') || el.areaName.includes('内蒙古')) {
            el.name = el.areaName.substring(0, 3);
          } else {
            el.name = el.areaName.substring(0, 2);
          }
        }
        el.totalContractMoney = Number((el.totalContractMoney / 10000).toFixed(2));
        el.maps = { buildShopNum: el.buildShopNum,
          totalCarNum: el.totalCarNum,
          totalContractMoney: el.totalContractMoney,
          totalQuoteAmount: el.totalQuoteAmount
        };
      });
      // 初始化地图
      const chinaMapDom = document.getElementById('chinaMap');
      this.chartGroup.china = echarts.init(chinaMapDom);
      const maps = data.list;
      this.chartGroup.china.setOption(this.chinaMapData({ largeMoney, totalRepair, maps }));
    },
    // 保费数据
    seriesData() {
      const dWidth = document.documentElement.clientWidth || window.innerWidth;
      const yAxisData = [];
      const result = [
        {
          name: this.premiumType[this.typeActive][0].name,
          type: 'bar',
          barGap: 0,
          barWidth: 15 * dWidth / 1920,
          color: 'rgba(0, 178, 255, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][1].name,
          barWidth: 15 * dWidth / 1920,
          type: 'bar',
          color: 'rgba(0, 107, 202, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][2].name,
          barWidth: 15 * dWidth / 1920,
          type: 'bar',
          color: 'rgba(0, 231, 194, 0.5)',
          data: []
        }
      ];
      if (this.areaData.list) {
        this.areaData.list = this.areaData.list.sort(sortBy('nowContractMoney'));
        this.areaData.list.forEach(el => {
          yAxisData.push(el.areaName);
          result[0].data.push(el.nowContractMoney);
          result[1].data.push(el.lastContractMoney);
          result[2].data.push(el.awayContractMoney);
        });
      }

      return { seriesData: result, yAxisData, unit: '万元' };
    },
    // 报价单数据
    billData() {
      const dWidth = document.documentElement.clientWidth || window.innerWidth;
      const yAxisData = [];
      const result = [
        {
          name: this.premiumType[this.typeActive][0].name,
          type: 'bar',
          barGap: 0,
          barWidth: 15 * dWidth / 1920,
          color: 'rgba(0, 178, 255, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][1].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          color: 'rgba(0, 107, 202, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][2].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          color: 'rgba(0, 231, 194, 0.5)',
          data: []
        }
      ];
      if (this.areaData.list) {
        this.areaData.list = this.areaData.list.sort(sortBy('nowQuoteAmount'));
        this.areaData.list.forEach(el => {
          yAxisData.push(el.areaName);
          result[0].data.push(el.nowQuoteAmount);
          result[1].data.push(el.lastQuoteAmount);
          result[2].data.push(el.awayQuoteAmount);
        });
      }
      return { seriesData: result, yAxisData, unit: '单' };
    },
    // 建店数
    storeData() {
      const dWidth = document.documentElement.clientWidth || window.innerWidth;
      const yAxisData = [];
      const result = [
        {
          name: this.premiumType[this.typeActive][0].name,
          type: 'bar',
          barGap: 0,
          barWidth: 15 * dWidth / 1920,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 178, 255, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][1].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 107, 202, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][2].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 231, 194, 0.5)',
          data: []
        }
      ];
      if (this.areaData.list) {
        this.areaData.list = this.areaData.list.sort(sortBy('nowBuildShopNum'));
        this.areaData.list.forEach(el => {
          yAxisData.push(el.areaName);
          result[0].data.push(el.nowBuildShopNum);
          result[1].data.push(el.lastBuildShopNum);
          result[2].data.push(el.awayBuildShopNum);
        });
      }
      return { seriesData: result, yAxisData, unit: '家' };
    },
    // 新增车辆
    carData() {
      const dWidth = document.documentElement.clientWidth || window.innerWidth;
      const yAxisData = [];
      const result = [
        {
          name: this.premiumType[this.typeActive][0].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          barGap: 0,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 178, 255, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][1].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 107, 202, 0.5)',
          data: []
        },
        {
          name: this.premiumType[this.typeActive][2].name,
          type: 'bar',
          barWidth: 15 * dWidth / 1920,
          label: {
            show: true,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 231, 194, 0.5)',
          data: []
        }
      ];
      if (this.areaData.list) {
        this.areaData.list = this.areaData.list.sort(sortBy('nowCarNum'));
        console.log(this.areaData.list, '新增车辆新增车辆新增车辆新增车辆新增车辆');
        this.areaData.list.forEach(el => {
          yAxisData.push(el.areaName);
          result[0].data.push(el.nowCarNum);
          result[1].data.push(el.lastCarNum);
          result[2].data.push(el.awayCarNum);
        });
      }
      return { seriesData: result, yAxisData, unit: '辆' };
    },
    // 地图数据
    chinaMapData({ largeMoney, totalRepair, maps }) {
      console.log(largeMoney, 'largeMoney');
      return {
        title: {
          left: 20,
          top: 20,
          // text: `{a|${this.areaData.total.areaName}门店}{b|${totalRepair}}{a|家}`,
          text: totalRepair ? `{a|全国门店}{b|${totalRepair}}{a|家}` : `{b|此地区暂无数据}`,
          textStyle: {
            rich: {
              a: {
                color: '#8291A9',
                fontSize: 20
              },
              b: {
                color: '#DCAC05',
                fontSize: 20
              }
            }
          }
        },
        visualMap: {// 设置地图左下角的图例
          precision: 2,
          type: 'continuous',
          left: 20,
          bottom: 20,
          orient: 'horizontal',
          textStyle: {
            color: 'rgba(3, 214, 255, 1)'
          },
          min: 0,
          max: Number(largeMoney) === 0.00 ? 100 : Number(largeMoney),
          inRange: {
            color: ['rgba(10, 24, 44, 1)', 'rgba(0, 214, 255, 0.2)', 'rgba(0, 214, 255, 0.4)', 'rgba(0, 214, 255, 0.6)', 'rgba(0, 214, 255, 0.8)', 'rgba(0, 214, 255, 1)']
          },
          text: [Number(largeMoney) === 0.00 ? 100 : largeMoney, '0.00'], // 文本，默认为数值文本
          calculable: false
        },
        tooltip: {// 悬浮窗样式
          show: true,
          // triggerOn: 'click',
          formatter: function(params) {
            let res = '';
            res = `
              <div style="display:flex;align-items: center;width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#fff;padding-left:.12rem;">
                <div style="width:5px;height:5px;border-radius:50%; background: #FFC600;"></div>
                <div style="padding-left:.09rem;">${params.name}</div>
              </div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">保费数：${params.data ? params.data.maps.totalContractMoney || 0 : 0}万元</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">建店数：${params.data ? params.data.maps.buildShopNum || 0 : 0}家</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">报价单数：${params.data ? params.data.maps.totalQuoteAmount || 0 : 0}单</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">车辆数：${params.data ? params.data.maps.totalCarNum || 0 : 0}辆</div>
              `;
            return res;
          }
        },
        geo: {
          map: this.checkProvice ? this.checkProvice.eName : 'china',
          roam: false, // 一定要关闭拖拽
          itemStyle: {
            areaColor: 'rgba(18, 18, 34, 1)',
            shadowBlur: 0,
            borderColor: 'rgba(0, 206, 225, 0.4)',
            borderWidth: 1
          }
        },
        series: [
          { type: 'map',
            map: this.checkProvice ? this.checkProvice.cName : 'china',
            label: { show: true },
            itemStyle: {
              normal: {
                borderColor: 'rgba(20, 86, 116, 1)',
                areaColor: 'rgba(10, 24, 44, 1)',
                label: {
                  show: true,
                  color: 'rgba(144, 144, 165, 1)'
                }
              },
              emphasis: {
                areaColor: 'rgba(0, 214, 255, 0.2)',
                borderWidth: 1,
                borderColor: 'rgba(0, 214, 255, 1)',
                label: {
                  show: true,
                  color: 'rgba(255, 198, 0, 1)'
                }
              }
            },
            data: maps
          }
        ]
      };
    },
    // 获取地图部分的数据
    getAreaMap(dom) {
      console.log('获取地图部分的数据');
      getAreaMsg({ dateType: this.typeActive, orgId: this.orgId, areaCode: this.checkProvice ? this.checkProvice.code : '' }).then(res => {
        dom.close();
        if (res.data.code === 0) {
          this.convertData(res.data.data);
        } else {
          // this.checkProvice = '';
          this.convertData({ list: [], largeMoney: 0, totalRepairNum: 0 });
          this.$notify.error({
            title: '错误',
            message: res.data.data
          });
        }
        this.loading = false;
      });
    },
    // 保费趋势
    trendData({ yAxisData, buildShopNum, contractMoney }) {
      const result = [
        {
          name: '保费（万元）',
          type: 'bar',
          barGap: 0,
          barMaxWidth: 15,
          label: {
            show: false,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 162, 232, 0.5)',
          data: contractMoney || []
        },
        {
          name: '建店数（家）',
          type: 'bar',
          barMaxWidth: 15,
          label: {
            show: false,
            position: 'top' // 在上方显示
          },
          color: 'rgba(0, 231, 194, 0.5)',
          data: buildShopNum || []
        },
        {
          name: 'line保费（万元）',
          type: 'line',
          color: '#0681FF',
          data: contractMoney || []
        },
        {
          name: 'line建店数（家）',
          type: 'line',
          color: '#F7AE4A',
          data: buildShopNum || []
        }
      ];
      return { seriesData: result, yAxisData };
    },
    // 切换日期
    changeType(item) {
      this.loading = true;
      this.typeActive = item.code;
      this.getTotalMsg();// 获取顶部数据
      this.getAreaData();// 获取其他表格数据
      // this.getAreaMap();// 获取地图数据
      this.getDateAndArea();// 获取保费趋势
      this.typeList.forEach(el => {
        el.checked = false;
        if (el.code === item.code) {
          el.checked = true;
        }
      });
    },
    // 转换全国保费收入数据
    stringToArray(arr) {
      const resArr = arr.reverse();
      const newArr = [];
      for (let i = 0; i < 11; i++) {
        newArr.push(resArr[i] ? resArr[i] : 0);
      }
      newArr.splice(3, 0, 't');
      newArr.splice(7, 0, 'y');
      newArr.splice(11, 0, 'p');
      return newArr.reverse();
    },
    herArrow(step, dom) {
      console.log(step, dom);
      if (this.options[dom].start === 0 && step < 0) return;
      let param = {};
      if (dom === 'store') {
        param = this.storeData();
      } else if (dom === 'car') {
        param = this.carData();
      }
      this.options[dom].start += step;
      this.options[dom].end += step;
      param.start = this.options[dom].start;
      param.end = this.options[dom].end;
      this.chartGroup[dom].setOption(this.setHerOption(param));
    },
    verArrow(step, dom) {
      if (this.options[dom].start === 0 && step < 0) return;
      let param = {};
      if (dom === 'premium') {
        param = this.seriesData();
      } else if (dom === 'bill') {
        param = this.billData();
      }
      this.options[dom].start += step;
      this.options[dom].end += step;
      param.start = this.options[dom].start;
      param.end = this.options[dom].end;
      this.chartGroup[dom].setOption(this.setVerOption(param));
    },
    toRight() {
      const param = this.storeData();
      this.options.start += 5;
      this.options.end += 5;
      param.start = this.options.start;
      param.end = this.options.end;
      console.log(param);
      this.chartGroup.store.setOption(this.setHerOption(param));
    },
    toLeft() {
      if (this.options.start === 0) return;
      const param = this.storeData();
      this.options.start -= 5;
      this.options.end -= 5;
      param.start = this.options.start;
      param.end = this.options.end;
      console.log(param);
      this.chartGroup.store.setOption(this.setHerOption(param));
    },
    // 获取地区的所有数据，现在只获取全国的  设置左右四个柱状图的数据
    getAreaData() {
      this.loadings.histogramLoading = true;
      const loadingInstance = Loading.service({ target: '#chinaMap', background: 'rgba(0, 0, 0, 0.5)' });
      getAreaDataByOrgId({ dateType: this.typeActive, orgId: this.orgId, areaCode: this.checkProvice ? this.checkProvice.code : '' }).then(res => {
        this.loadings.histogramLoading = false;
        const result = res.data;
        if (result.code === 0) {
          result.data.total.totalContractMoney = (result.data.total.totalContractMoney / 10000).toFixed(2);
          result.data.list.forEach(el => {
            el.nowContractMoney = (el.nowContractMoney / 10000).toFixed(2);
            el.lastContractMoney = (el.lastContractMoney / 10000).toFixed(2);
            el.awayContractMoney = (el.awayContractMoney / 10000).toFixed(2);
          });
          this.areaData = result.data;
          this.chartGroup.premium.setOption(this.setVerOption(this.seriesData()));
          this.chartGroup.bill.setOption(this.setVerOption(this.billData()));
          this.chartGroup.store.setOption(this.setHerOption(this.storeData()));
          this.chartGroup.car.setOption(this.setHerOption(this.carData()));
        } else {
          this.areaData = { list: [], total: {}};
        }
        this.getAreaMap(loadingInstance);// 获取地图数据
      });
    },
    // 获取全国保费  建店数
    getTotalMsg() {
      getTotalMsgByOrgId({ dateType: this.typeActive, orgId: this.orgId, areaCode: this.checkProvice ? this.checkProvice.code : '' }).then(res => {
        if (res.data.code === 0) {
          this.totalMsg = res.data.data;
          this.totalMsg.totalMoney = this.stringToArray(String(parseInt(this.totalMsg.totalMoney)).split(''));
        }
      });
    },
    timeToWeek(time) {
      const timeArr = time.split('.');
      const year = new Date().getFullYear();
      const month = timeArr[0];
      const day = timeArr[1];
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const allDay = `${year}-${month}-${day}`;
      return weeks[new Date(allDay).getDay()];
    },
    // 获取保费趋势
    getDateAndArea() {
      this.loadings.trandLoading = true;
      getDateAndAreaMsg({ dateType: this.typeActive, orgId: this.orgId, areaCode: this.checkProvice ? this.checkProvice.code : '' }).then(res => {
        this.loadings.trandLoading = false;
        const result = res.data;
        if (result.code === 0) {
          if (this.typeActive === 'week') {
            const weeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
            const startDay = result.data.length;
            for (let i = startDay; i < 7; i++) {
              result.data.push({
                dateStr: weeks[i], buildShopNum: 0, contractMoney: 0, type: 'add'
              });
            }
          }
          result.data.forEach(el => {
            el.contractMoney = (el.contractMoney / 10000).toFixed(2);
            if (this.typeActive === 'week' && !el.type) {
              // el.dateStr = this.timeToWeek(el.dateStr);
            }
          });
          setTimeout(() => {
            this.chartGroup.trend.setOption(this.setTrendOption(this.trendData(this.getTrendAxisData(result.data))));
          }, 200);
        }
      });
    },
    getTrendAxisData(data) {
      const result = { yAxisData: [], buildShopNum: [], contractMoney: [] };
      data.forEach(el => {
        result.yAxisData.push(el.dateStr);
        result.buildShopNum.push(el.buildShopNum);
        result.contractMoney.push(el.contractMoney);
      });
      return result;
    },
    // 设置横向柱状图的配置
    setVerOption({ yAxisData, seriesData, unit, start, end }) {
      return {
        splitLine: {
          show: false
        },
        dataZoom: [
          {
            orient: 'vertical',
            // moveOnMouseMove: 'ctrl',
            zoomLock: true,
            type: 'inside',
            start: start || 0,
            end: end || 80,
            show: false,
            yAxisIndex: [0],
            minValueSpan: 3,
            maxValueSpan: 3
          }
        ],
        legend: {
          show: false,
          data: this.getToolTips(),
          textStyle: {
          },
          itemHeight: '10',
          borderRadius: '3',
          backgroundColor: 'rgba(0, 214, 255, 0.04)',
          formatter: function(param) {
            return param;
          }
        },
        tooltip: {
          trigger: 'axis',
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5; // 自己定个x坐标值，以防出屏
              y -= 15; // 防止点被覆盖住，可根据情况自行调节
            } else { // 左边放的下
              x = pointX - boxWidth - 15;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight + 20 > pointY) {
              y = pointY + 15;
            } else if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y += pointY - boxHeight;
            }
            return [x, y];
          },
          formatter: function(params) {
            let res = '';
            if (params) {
              res = `
              <div style="display:flex;align-items: center;width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#fff;padding-left:.12rem;">
                <div style="width:5px;height:5px;border-radius:50%; background: #FFC600;"></div>
                <div style="padding-left:.09rem;">${params[0].axisValueLabel}</div>
              </div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[0].seriesName}：${params[0].value}${unit}</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[1].seriesName}：${params[1].value}${unit}</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[2].seriesName}：${params[2].value}${unit}</div>
              `;
            }
            return res;
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          show: false,
          type: 'value',
          axisLabel: {// 去除底部刻度
            show: false
          },
          axisTick: {// 刻度线相关设置
            show: false
          },
          splitLine: {// 坐标轴轴线相关设置 去除中间网格
            show: false
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          axisTick: {// 刻度线相关设置
            show: false,
            length: 200
          },
          type: 'category',
          data: yAxisData || [],
          axisLabel: {// 坐标轴文案相关设置
            color: '#0AF5F7',
            overflow: 'truncate',
            borderColor: '#133951',
            interval: 0,
            formatter: function(value) {
              if (value) {
                const str = value.slice(0, 2).split('');
                return `{label|${str.join('\n')}}`;
              } else {
                return `{label|${''}}`;
              }
            },
            rich: {
              label: {
                color: '#0AF5F7',
                borderWidth: '1px',
                borderColor: '#133951',
                paddingTop: '20px'
                // width: 30,
                // textAlign: 'center',
                // height: 23
              }
            }
          }
        },
        series: seriesData
      };
    },
    // 设置竖向柱状图的配置
    setHerOption({ yAxisData, seriesData, unit, start, end }) {
      const dWidth = document.documentElement.clientWidth || window.innerWidth;
      return {
        splitLine: {
          show: false
        },
        // 区域缩放 可滑动
        dataZoom: [
          {
            orient: 'horizontal',
            zoomLock: true,
            type: 'inside',
            start: start || 0,
            end: end || 80,
            show: false,
            xAxisIndex: [0],
            minValueSpan: 3,
            maxValueSpan: 3,
            moveOnMouseMove: true
          }
        ],
        // 图例
        legend: {
          show: false,
          data: this.getToolTips(),
          textStyle: {
          },
          itemHeight: '10',
          borderRadius: '3',
          backgroundColor: 'rgba(0, 214, 255, 0.04)',
          formatter: function(param) {
            return param;
          }
        },
        // 提示框组件。
        tooltip: {
          trigger: 'axis',
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5; // 自己定个x坐标值，以防出屏
              y -= 15; // 防止点被覆盖住，可根据情况自行调节
            } else { // 左边放的下
              x = pointX - boxWidth - 15;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight + 20 > pointY) {
              y = pointY + 15;
            } else if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y += pointY - boxHeight;
            }
            return [x, y];
          },
          formatter: function(params) {
            let res = '';
            if (params) {
              res = `
              <div style="display:flex;align-items: center;width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#fff;padding-left:.12rem;">
                <div style="width:5px;height:5px;border-radius:50%; background: #FFC600;"></div>
                <div style="padding-left:.09rem;">${params[0].axisValueLabel}</div>
              </div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[0].seriesName}：${params[0].value}${unit}</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[1].seriesName}：${params[1].value}${unit}</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">${params[2].seriesName}：${params[2].value}${unit}</div>
              `;
            }
            return res;
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        // 直角坐标系 grid 中的 x 轴
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLabel: {// 坐标轴文案相关设置
            show: true,
            color: '#0AF5F7',
            borderColor: '#133951',
            interval: 0,
            formatter: function(value) {
              if (value) {
                const str = value.slice(0, 2);
                return `{label| ${str}}`;
              } else {
                return `{label| ${''}}`;
              }
            },
            rich: {
              label: {
                color: '#0AF5F7',
                borderWidth: '1px',
                borderColor: '#133951',
                width: 61 * dWidth / 1920,
                height: 25
              }
            }
          },
          data: yAxisData || []
        },
        yAxis: {
          show: false,
          axisTick: {// 刻度线相关设置
            show: false
          },
          splitLine: {// 坐标轴轴线相关设置 去除中间网格
            show: false
          },
          type: 'value',
          axisLabel: {// 坐标轴文案相关设置
            show: false
          }
        },
        series: seriesData
      };
    },
    // 设置保费趋势
    setTrendOption({ yAxisData, seriesData }) {
      return {
        dataZoom: [
          {
            orient: 'horizontal',
            zoomLock: true, // 设置只能平移不能缩放
            type: 'inside',
            start: 0,
            // end: 80,
            show: false,
            xAxisIndex: [0],
            minValueSpan: 0,
            maxValueSpan: 13,
            moveOnMouseMove: true
          }
        ],
        splitLine: {
          show: false
        },
        color: ['rgba(6, 129, 255, 1)', 'rgba(247, 174, 74, 1)', 'rgba(6, 129, 255, 1)', 'rgba(247, 174, 74, 1)'],
        legend: {
          show: true,
          // top: 30,
          data: ['保费（万元）', '建店数（家）'],
          itemHeight: '10',
          borderRadius: '3',
          textStyle: {
            color: '#00b2ff'
          },
          backgroundColor: 'rgba(0, 214, 255, 0.04)'
        },
        tooltip: {
          trigger: 'axis',
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5; // 自己定个x坐标值，以防出屏
              y -= 15; // 防止点被覆盖住，可根据情况自行调节
            } else { // 左边放的下
              x = pointX - boxWidth - 15;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight + 20 > pointY) {
              y = pointY + 15;
            } else if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y += pointY - boxHeight;
            }
            return [x, y];
          },
          formatter: function(params) {
            let res = '';
            if (params) {
              res = `
              <div style="display:flex;align-items: center;width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#fff;padding-left:.12rem;">
                <div style="width:5px;height:5px;border-radius:50%; background: #FFC600;"></div>
                <div style="padding-left:.09rem;">${params[0].axisValueLabel}</div>
              </div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">保费数：${params[0].value}万元</div>
              <div style="width:150px;top:5px;left:30px;height:20px;font-size:.12rem;color:#FFC600;padding-left:.26rem;">建店数：${params[1].value || 0}家</div>
              `;
            }
            return res;
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLabel: {// 坐标轴文案相关设置
            show: true,
            color: '#0AF5F7',
            borderColor: '#133951',
            interval: 0
          },
          boundaryGap: [0, 0.01],
          data: yAxisData || []
        },
        yAxis: {
          axisTick: {// 刻度线相关设置
            show: false
          },
          splitLine: {// 坐标轴轴线相关设置 去除中间网格
            show: false
          },
          type: 'value',
          axisLabel: {// 坐标轴文案相关设置
            show: false
          }
        },
        series: seriesData
      };
    },
    backChina() {
      this.checkProvice = '';
      this.getTotalMsg();// 获取顶部数据
      this.getAreaData();// 获取其他表格数据
      this.getDateAndArea();// 获取保费趋势
      // this.getAreaMap();// 获取地图数据
    },
    closeDialog() {
      if (this.isFullScreen) {
        document.exitFullscreen();
      }
      this.dialog.showModal = false;
    },
    fullMap() {
      this.isFullScreen = !this.isFullScreen;
      if (this.isFullScreen) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.fullscreen-content{
  box-sizing: border-box;
  background: url('./images/all-bg.png');
  background-color: #121222;
  background-size: cover;
  .com-head{
    height: .82rem;
    width: 100%;
    background: url('./images/head.png') no-repeat;
    background-size: contain;
    .left-date-time{
      position: absolute;
      background: url('./images/clock.png') no-repeat;
      background-size: .32rem .32rem;
      height: .36rem;
      background-position: left center;
      padding-left: .34rem;
      line-height: .36rem;
      color: rgba(78, 232, 255, 1);
      font-size: .18rem;
      left: 0.93rem;
      top: .40rem;
    }
    .head-title{
      margin: 0 auto;
      width: 5.30rem;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: .23rem;
    }
  }
  .left{
    padding:.32rem 0 .30rem .30rem;
    font-size: .20rem;
    box-sizing: border-box;
    .left-date-list{
      color: #98C6CF;
      display: flex;
      margin-right: .55rem;
      justify-content: space-around;
      .date-item{
        flex: 1;
        height: .38rem;
        background: url('./images/date-bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &.checked{
          color: #0AF5F7;
          font-weight: 550;
          background: url('./images/date-checked-bg.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .premium-content{
      position: relative;
      box-sizing: border-box;
      margin-top: .2rem;
      height: 4.21rem;;
      background-color: rgba(0, 206, 225, 0.01);
      border: 2px solid rgba(0, 206, 225, 0.09);
      .arrow-left{
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 999;
      }
      .arrow-right{
        position: absolute;
        right: 0;
        bottom:0;
        z-index: 999;
      }
      .title{
        font-size: .18rem;
        height: .52rem;
        line-height: .52rem;
        border-bottom: 1px solid rgba(0, 206, 225, 0.1);
        background: url('./images/title-bg.png') ;
        background-color: rgba(0, 214, 255, 0.04);
        .title-left{
          background: url('./images/title-arrow.png') no-repeat;
          background-size: .24rem;
          background-position: .20rem center;
          width: 30%;
          padding-left: .52rem;
          color: rgba(250, 248, 3, 1);
          float: left;
        }
        .title-right{
          width: 70%;
          float: right;
          font-size: .12rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .tag-item{
              display: flex;
              align-items: center;
              .title-tag{
                width: .20rem;
                height: .1rem;
                border-radius: .05rem;
                margin-right: .05rem;
              }
              &.blue{
                color: rgb(0, 178, 255);
                .title-tag{
                  background-color: rgb(0, 178, 255);
                }
              }
              &.deep-blue{
                color: rgb(0, 107, 202);
               .title-tag{
                  background-color: rgb(0, 107, 202);
                }
              }
              &.green{
                color:rgb(0, 231, 194);
               .title-tag{
                  background-color:  rgb(0, 231, 194);
                }
              }
          }
        }
      }
      .total{
        width: 64%;
        height: .47rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #01C6ED;
        background: url('./images/total-bg.png') no-repeat;
        background-size: 100% 100%;
        margin: .20rem auto .16rem;
        .total-left{
          font-size: .14rem;
          width: 64%;
          text-align: center;
        }
        .total-right{
          text-align: center;
          width: 36%;
          font-size: .22rem;
        }
      }
      .premium{
        position: absolute;
        top: 0.48rem;
        left: 0px;
        height: 4.21rem;
        width: 100%;
      }
    }
  }
  .center{
    .header{
      font-size: .22rem;
      display: flex;
      justify-content: space-between;
      padding: .1rem 0 .13rem;
      color: #8291A9;
      span{
        color: #DCAC05;
      }
    }
    .price-content{
      display: flex;
      span{
        color: #00CEE1;
        display: flex;
        align-items: flex-end;
        font-size: .5rem;
        width: .13rem;
        text-align: center;
      }
      .price-item{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.57rem;
        height: 0.57rem;
        font-size: .5rem;
        background: rgba(0, 104, 123, 0.2);
        border: 1px solid #0197A9;
        color: #00CEE1;
        margin-left: .10rem;
        &:first-child{
          margin-left: 0;
        }
        span{
          width: unset;
        }
      }
    }
    .map-content{
      position: relative;
      .text{
        position: absolute;
        bottom: .65rem;
        left: 0.55rem;
        color:#8291A9;
      }
      .back{
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
      }
    }
    .china-map{
      height: 5.89rem;
      margin-top: .35rem;
      background: url('./images/full-bg.png') no-repeat;
      background-size: 100% 100%;
    }
    .trend-content{
      position: relative;
      margin-top: 0.28rem;
      height: 2.13rem;
      border: .02rem solid rgba(0, 206, 225, 0.09);
      .trand-title{
        width: .45rem;
        height: 1.71rem;
        background:url('./images/trand.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: .2rem;
        left: .18rem;
      }
      .trend{
        height: 2.13rem;
        width: 100%;
        position: absolute;
        left: .10rem;
        top: 0.2rem;
      }
    }
  }
  .right{
    padding:.32rem .30rem .30rem 0px;
    font-size: .20rem;
    box-sizing: border-box;
    .left-date-time{
      color: #B0CEE2;
      font-size: .26rem;
      height: .38rem;
      padding-left: .57rem;
    }
    .premium-content{
      position: relative;
      box-sizing: border-box;
      margin-top: .2rem;
      height: 4.21rem;;
      background-color: rgba(0, 206, 225, 0.01);
      border: 2px solid rgba(0, 206, 225, 0.09);
      .title{
        font-size: .18rem;
        height: .52rem;
        line-height: .52rem;
        border-bottom: 1px solid rgba(0, 206, 225, 0.1);
        background: url('./images/title-bg.png') ;
        background-color: rgba(0, 214, 255, 0.04);
        .title-left{
          background: url('./images/title-arrow.png') no-repeat;
          background-size: .24rem;
          background-position: .20rem center;
          width: 30%;
          padding-left: .52rem;
          color: rgba(250, 248, 3, 1);
          float: left;
        }
        .title-right{
          width: 70%;
          float: right;
          font-size: .12rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .tag-item{
              display: flex;
              align-items: center;
              .title-tag{
                width: .20rem;
                height: .10rem;
                border-radius: .05rem;
                margin-right: .05rem;
              }
              &.blue{
                color: rgba(0, 178, 255, 1);
                .title-tag{
                  background-color: rgba(0, 178, 255, 1);
                }
              }
              &.deep-blue{
                color: rgba(0, 107, 202, 1);
               .title-tag{
                  background-color: rgba(0, 107, 202, 1);
                }
              }
              &.green{
                color:rgba(0, 231, 194, 1);
               .title-tag{
                  background-color:  rgba(0, 231, 194, 1);
                }
              }
          }
        }
      }
      .total{
        width: 64%;
        height: .47rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #01C6ED;
        background: url('./images/total-bg.png') no-repeat;
        background-size: 100% 100%;
        margin: .20rem auto .16rem;
        .total-left{
          font-size: .14rem;
          width: 64%;
          text-align: center;
        }
        .total-right{
          text-align: center;
          width: 36%;
          font-size: .22rem;
        }
      }
      .premium{
        position: absolute;
        bottom: -0.16rem;
        left: 0px;
        height: 3.38rem;
        width: 100%;
      }
    }
  }
  .empty{
    color: #01C6ED;
    text-align: center;
    line-height: 10;
    font-size: .15rem;
  }
  .her-arrow-left{
    position: absolute;
    left: .20rem;
    bottom: .08rem;
    z-index: 999;
    background-color: #10182C;
    border: 1px solid #133951;
    width: .20rem;
    height: .30rem;
    padding: 0;
    color: #0AF5F7;
  }
  .her-arrow-right{
    position: absolute;
    right: .20rem;
    bottom: .08rem;
    z-index: 999;
    background-color: #10182C;
    border: 1px solid #133951;
    width: .20rem;
    height: .30rem;
    padding: 0;
    color: #0AF5F7;
  }
  .ver-arrow-top{
    position: absolute;
    top: 1.05rem;
    left: .20rem;
    z-index: 999;
    background-color: #10182C;
    border: 1px solid #133951;
    width: .30rem;
    height: .20rem;
    padding: 0;
    color: #0AF5F7;
  }
  .ver-arrow-bottom{
    position: absolute;
    left: .07rem;
    bottom: .07rem;
    z-index: 999;
    background-color: #10182C;
    border: 1px solid #133951;
    width: .30rem;
    height: .20rem;
    padding: 0;
    color: #0AF5F7;
  }
  .close-box{
    position: absolute;
    right: 1.23rem;
    top: .41rem;
    display: flex;
    align-items: center;
    color: rgba(78, 232, 255, 1);
    .close-btn{
      color: #0AF5F7;
      background: url('./images/close.png') no-repeat;
      background-size: contain;
      // background-color: #10182C;
      border:none;
      z-index: 999;
      width: .30rem;
      height: .30rem;
      padding: 0;
    }
  }
  .full-box{
    display: flex;
    align-items: center;
    position: absolute;
    right: 2.50rem;
    top: .41rem;
    color: rgba(78, 232, 255, 1);
    .full-btn{
      background: url('./images/fullpage.png') no-repeat;
      background-size: contain;
      color: #0AF5F7;
      // background-color: #10182C;
      border:none;
      z-index: 999;
      width: .30rem;
      height: .30rem;
      padding: 0;
    }
    .exit-full-btn{
      background: url('./images/exitfull.png') no-repeat;
      background-size: contain;
      color: #0AF5F7;
      // background-color: #10182C;
      border:none;
      z-index: 999;
      width: .30rem;
      height: .30rem;
      padding: 0;
    }
  }
}
</style>
